<!-- 楼宇管理页 -->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">实体资产管理</span>
    <el-button @click="beforeAddFixAssets" type="primary" style="float:right;margin-top:13px;">
      新建实体资产
    </el-button>
  </div>
  <!-- 新增资产弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="资产名称">
            <el-input placeholder="请输入内容" v-model="saveFixAssetsForm.assetName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号编号">
            <el-input placeholder="请输入内容" v-model="saveFixAssetsForm.modelNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="序列号">
            <el-input placeholder="请输入内容" v-model="saveFixAssetsForm.serialNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购买价格">
            <el-input placeholder="请输入内容" v-model="saveFixAssetsForm.purchasePrice"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input placeholder="请输入内容" v-model="saveFixAssetsForm.notes"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产类型">
            <el-select v-model="saveFixAssetsForm.category" placeholder="请选择">
              <el-option
                  v-for="item in assetTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="供应商id">
            <el-input placeholder="请输入内容" v-model="saveFixAssetsForm.supplierId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="位置id">
            <el-input placeholder="请输入内容" v-model="saveFixAssetsForm.locationId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="附件id">
            <el-input placeholder="请输入内容" v-model="saveFixAssetsForm.attachmentId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="购买日期">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveFixAssetsForm.purchaseDate"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="最近一次维护日期">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveFixAssetsForm.lastMaintenance"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下次维护日期">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveFixAssetsForm.nextMaintenance"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产状态">
            <el-radio-group v-model="saveFixAssetsForm.status" >
              <el-radio value="10">使用中</el-radio>
              <el-radio value="20">闲置</el-radio>
              <el-radio value="30">维修中</el-radio>
              <el-radio value="40">已报废</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveFixAssets">确定</el-button>
    </template>
  </el-dialog>
  <!-- 楼宇搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="资产名称/编号">
        <el-input placeholder="请输入内容" style="width:220px;"
                  v-model="searchFixAssetsForm.assetName" @keydown.enter="loadFixAssets"></el-input>
      </el-form-item>
      <el-form-item label="资产类型">
        <el-select placeholder="请选择" style="width:220px;"
                   v-model="searchFixAssetsForm.category">
          <el-option v-for="item in assetTypeList"
                     :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资产状态">
        <el-select placeholder="请选择状态" style="width:220px;" v-model="searchFixAssetsForm.status">
          <el-option v-for="item in deviceStatusList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadFixAssets">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 楼宇列表 -->
  <el-card style="margin:20px;">
    <el-table :data="fixAssetsArr" @selection-change="handleSelectionChange" style="height: 600px;">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="assetName" label="资产名称"  align="center"/>
      <el-table-column prop="modelNumber" label="型号编号"  align="center"/>
      <el-table-column prop="serialNumber" label="序列号"  align="center"/>
      <el-table-column prop="purchaseDate" label="购买日期"  align="center"/>
      <el-table-column prop="purchasePrice" label="购买价格"  align="center"/>
      <el-table-column prop="status" label="当前状态"  align="center"
                       :formatter="deviceStatusFormatter"/>
      <el-table-column prop="lastMaintenance" label="最近维护日期"  align="center"></el-table-column>
      <el-table-column prop="nextMaintenance" label="下次维护日期"  align="center"></el-table-column>
      <el-table-column prop="notes" label="备注"  align="center"></el-table-column>
      <el-table-column prop="category" label="资产类型" align="center"
      :formatter="assetTypeFormatter"></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editFixAssets(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteFixAssets(scope.row.id)">删除</el-button>
          <el-button link type="primary" size="small" @click="FindAll(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import qs from "qs";
import axios from "axios";
import { ElMessage } from 'element-plus';
import router from "@/router";

// 控制新增楼宇弹窗是否显示
const dialogVisible = ref(false);
// 定义变量控制dialog的标题
const dialogTitle = ref('新增实体资产');

const deviceStatusList = ref([]);
const assetTypeList = ref([]);
onMounted(() => {
  loadDictOptions(deviceStatusList, 'deviceStatus');
  loadDictOptions(assetTypeList, 'assetType')
});
const deviceStatusFormatter = (row, column, cellValue, index) => {
  if (!deviceStatusList.value) {
    return cellValue;
  }
  for (let item of deviceStatusList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const assetTypeFormatter = (row, column, cellValue, index) => {
  if (!assetTypeList.value) {
    return cellValue;
  }
  for (let item of assetTypeList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const saveFixAssetsForm = ref({
  id:'',
  assetName:'',
  modelNumber:'',
  serialNumber:'',
  purchaseDate:'',
  purchasePrice:'',
  notes:'',
  status:'',
  category:'',
  supplierId:'',
  locationId:'',
  attachment:'',
  lastMaintenance:'',
  nextMaintenance:''
});

// 定义对象用来保存楼宇搜索条件
const searchFixAssetsForm = ref({assetName:'',category:'',status:''});
// 定义数组用来保存楼宇列表表格数据
const fixAssetsArr = ref([]);

// 定义查询的方法
const loadFixAssets = () => {
  let data =qs.stringify(searchFixAssetsForm.value);
  axios.get(BASE_URL+'/v1/fixed/select?'+data).then((response)=>{
    if (response.data.code === 2000){
      fixAssetsArr.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }

  })

};

// 一进入页面立即加载资产数据
onMounted(() => {
  loadFixAssets();
});


// 定义重置搜索的方法
const resetSearch = () => {
  searchFixAssetsForm.value = {};
  loadFixAssets();
};

// 打开新增或编辑楼宇对话框
const  beforeAddFixAssets = () => {
  dialogTitle.value = '新增实体资产';
  dialogVisible.value = true;
  Object.assign(saveFixAssetsForm.value, {
    assetName:'',
    modelNumber:'',
    serialNumber:'',
    purchaseDate:'',
    purchasePrice:'',
    notes:'',
    status:'',
    category:'',
    supplierId:'',
    locationId:'',
    attachmentId:''
  });
};

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
};

// 保存资产信息
const saveFixAssets = () => {
  let data = qs.stringify(saveFixAssetsForm.value);
  axios.post(BASE_URL+'/v1/fixed/save',data).then((response)=>{
    if(response.data.code===2000){
      ElMessage.success("保存成功!");
      saveFixAssetsForm.value={};
      dialogVisible.value = false;
      loadFixAssets();
    }else{
      ElMessage.error("资产名称不允许重置")
    }
  })
};


const editFixAssets = (id) => {
  dialogTitle.value = '编辑资产';
  dialogVisible.value = true;

  axios.get(BASE_URL+'/v1/fixed/select?id='+id).then((response)=>{
    if (response.data.code===2000){
      saveFixAssetsForm.value = response.data.data[0];
      loadFixAssets();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
};

// 删除资产信息
const deleteFixAssets = (id) => {
  alert(id)
  if (confirm('您确定要删除该资产么')){
    axios.delete(BASE_URL+'/v1/fixed/delete/'+id).then((response)=>{
      if (response.data.code === 2000){
        ElMessage.success('删除成功')
        loadFixAssets();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
};
// 定义处理选择变化的方法
const handleSelectionChange = (selection) => {
  console.log('Selected buildings:', selection);
  // 这里可以实现多选操作逻辑，例如批量删除等
};

// 定义状态格式化函数
const statusFormatter = (row, column, cellValue) => {
  const statusMap = {
    '0': '使用中',
    '1': '闲置',
    '2': '维修中',
    '3': '已报废'
  };
  return statusMap[cellValue] || '未知状态';
};

const FindAll = (id) =>{
  router.push('/details?id='+id)
}

</script>
